<template>
	<div class="flex_menu">
		<div class="left_menu">
			<div class="left-menu-inner" :style="{height: `${tableHeight}px`,overflow: 'auto'}">
				<div
					v-for="(item, index) in menuData"
					:key="item.id"
					class="left-menu-item"
					:class="{checkedStyle: item[keyName] === activeMenu}"
					@click="onMenu(item, index)"
				>
					<span>{{ item.name }}</span>
					<span v-if="showCount" class="circle-num">{{ !item.count || item.id >= 6 ? '' : item.count }}</span>
				</div>
			</div>
		</div>
		<div class="right_menu">
			<div class="right-menu-header">
				<slot name="header">

				</slot>
			</div>
			<div class="right-menu-content">
				<slot />
			</div>
		</div>
	</div>
</template>

<script>
    import calHeight from '../../../mixins/cal-table-height';

    export default {
        name: 'LeftMenu',
        mixins: [calHeight],
        props: {
            menuData: {
                type: Array,
                default() {
                    return [];
                }
            },
            keyName: {
                type: String,
                default: 'code'
            },
            activeMenu: {
                type: [Number, String],
                default: ''
            },
            showCount: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                mainHeight: 0
            };
        },
        methods: {
            onMenu(item, index) {
                this.$emit('on-menu', item, index);
            }
        }
    };
</script>

<style scoped lang="scss">
$border_color: #e8eaec;
$out_border_color: #dcdee2;
.flex_menu {
    width: 100%;
    display: flex;
    //border: 1px solid $border_color;
    box-sizing: border-box;
    height: calc(100vh - 120px);
    justify-content: space-between;
    //padding-right: 10px;
    .left_menu {
        width: 180px;
        border-right: 1px solid $border_color;
      border-top: 1px solid $out_border_color;
      border-bottom: 1px solid $out_border_color;
      border-left: 1px solid $out_border_color;
      border-radius: 8px 0 0 8px;
      overflow: hidden;
      background: #fff;

      box-sizing: border-box;
        text-align: left;
        float: left;
        flex-shrink: 0;

        .left-menu-inner {
            width: 100%;
            font-size: 14px;
            .left-menu-item{
                height: 42px;
                display: flex;
                align-items: center;
              letter-spacing: 1px;
            }
            .checkedStyle {
                border-right: 1px solid #2d8cf0;
                border-left: 1px solid #2d8cf0;
                color: #fff;
                background: #2d8cf0;
                font-weight: 700;

                .circle-num {
                    -webkit-border-radius: 100px;
                    -moz-border-radius: 100px;
                    border-radius: 100px;
                    color: #fff;
                    font-size: 12px;
                    padding: 0;
                    width: 30px;
                    display: inline-block;
                    text-align: center;
                    line-height: 18px;
                    position: absolute;
                    right: 25px;
                    z-index: 10;
                    top: 12px;
                }
            }
        }

        .left-menu-inner > div {
            cursor: pointer;
            padding: 5px 20px;
            line-height: 2em;
            border-bottom: 1px solid $border_color;
            box-sizing: border-box;
            color: #999;
            position: relative;
        }
    }
    .right_menu {
        width: 100%;
      background: #fff;
      overflow: auto;
        //padding-top: 15px;
        //padding: 0 16px;
      border-top: 1px solid $out_border_color;
      border-bottom: 1px solid $out_border_color;
      border-right: 1px solid $out_border_color;
      border-radius: 0px 8px 8px 0;

      .right-menu-header {
            height: 42px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #eee;
            padding: 0 10px;
            margin-bottom: 10px;
        }
        .right-menu-content {
            padding: 0 10px;

        }
    }
}

</style>
